<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <el-form-item label="姓名/登录名：">
            <el-input v-model="listQuery.name"
                      placeholder="请输入"
                      clearable />
          </el-form-item>
        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询</el-button>
        </div>
      </template>
    </search-box>
    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column prop="name"
                         label="姓名">
        </el-table-column>
        <el-table-column prop="username"
                         label="登录名">
        </el-table-column>
        <el-table-column prop="description"
                         label="所属区域">
          <template slot-scope="scope">
            <span>{{ scope.row.description.split("测")[1] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as apiUser from '@/api/user'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// 当然你也可以为了方便使用，将它注册到全局
import { MessageBox } from 'element-ui'
import bus from '@/utils/eventBus'
import searchBox from '@/components/searchBox.vue'

export default {
  name: 'AdminUser',
  components: { Pagination, searchBox },
  directives: { waves },
  filters: {

  },
  data () {
    return {
      list: null,
      total: 0,
      listQuery: { // 查询列表时的参数对象
        pageNumber: 1,
        pageSize: 50,
        name: undefined,
        appName: process.env.VUE_APP_APP_NAME,
        tenantIdList: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'selectedTenantId',
      'tenantList'
    ])
  },
  created () {
    this.getList()
    // 监听 租户改变的事件,选择不同租户后,立马刷新数据
    bus.$on('selectedTenantIdChanged', () => {
      console.log("selectedTenantIdChanged事件触发...")
      this.getList()
    })
  },
  mounted () {
    // 测试用
    // var that = this
    // setTimeout(function() {
    //   that.dialogFormVisible = true
    // }, 5000)
  },
  beforeDestroy () { // 当路由切换到其他页面时触发
    bus.$off('selectedTenantIdChanged')
  },
  methods: {
    async getList () { // 获取列表数据
      this.listQuery.tenantIdList = []
      if (this.selectedTenantId == undefined) {//当前选中所有的租户
        this.tenantList.forEach((tenant, index) => {
          this.listQuery.tenantIdList.push(tenant.id)
        })
      } else {
        this.listQuery.tenantIdList.push(this.selectedTenantId)
      }
      const { content } = await apiUser.getAdminUserList(this.listQuery)
      this.list = content.list
      this.total = content.totalCounts
    },
    handleFilter () {
      this.listQuery.pageNumber = 1
      this.getList()
    }
  }
}
</script>

<style scoped>
.app-select {
  margin-bottom: 20px;
}
</style>
